<template>
  <div>
    <a-card>
      <a-row :gutter="[32,8]">
        <a-col :span="8">
          <vxe-button status="primary" icon="vxe-icon-add">导入</vxe-button>
          <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvent">
            <template #action="{ row }">
              <vxe-button
                status="primary"
                content="查看"
                @click="preview(row)"
              ></vxe-button>
            </template>
          </vxe-grid>
        </a-col>
        <a-col :span="16">
          <p class="text-lg font-bold">文件预览</p>
          <vue-office-excel
            :src="excel"
            style="height: 800px"
            @rendered="renderedHandler"
            @error="errorHandler"
          />
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script setup lang="ts">
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";
const { gridOptions } = useHistoryQuote();
const excel = ref("");

const xGrid = ref();
const gridEvent: VxeGridListeners<RowVO> = {
  proxyQuery() {
    console.log("数据代理查询事件");
    const grid = xGrid.value;
    // 获取表格中的数据
    // const data = grid.getTableData().fullData;
    // console.log(data);
  },
  proxyDelete() {
    console.log("数据代理删除事件");
  },
  proxySave() {
    console.log("数据代理保存事件");
  },
};
//是oss的路径地址
const preview = (row) => {
  excel.value = `https://${row.download_url}`;
};

const renderedHandler = () => {};

const errorHandler = () => {};
</script>

<style scoped></style>
